<template>
	<view class="pageBox">
		<view class="tips color_fff size_12 align_c" :class="{ 'show':ajax.loading }" @tap="getHistoryMsg">{{ajax.loadText}}</view>
		<view class="box-1" id="list-box">
			<view class="talk-list">
				<view v-for="(item,index) in talkList" :key="index" :id="`msg-${item.id}`">
					<view class="item flex_col" :class="item.senderUserId == useInfo.userId? 'push':'pull' ">
						<image :src="item.senderUserId == useInfo.userId ? '/static/icon_person.png' : '/static/logo_icon.png'" mode="aspectFill" class="pic"></image>
						<view class="content">{{item.content}}
						<p>{{item.sendTime}}</p>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="box-2">
			<view class="flex_col">
				<view class="flex_grow">
					<input type="text"  class="content" v-model="content" 
					 placeholder="请输入聊天内容" placeholder-style="color:#DDD;" :cursor-spacing="6" maxlength="500">
				</view>
				<button class="send" @click="send">发送</button>
			</view>
		</view>
	</view>
</template>

<script>
	import wsRequest from './uni.socket.js'
	import { WebSocket_URL } from '@/config/api.js'
	export default {
		data() {
			return {
				talkList:[],
				ajax:{
					rows:20,	//每页数量
					pageNum:1,	//页码
					pages: 1,
					flag:true,	// 请求开关
					loading:true,	// 加载中
					loadText:'正在获取消息'
				},
				content:'',
				// WebSocket_URL: 'ws://nfpready.y2t.com/customer/msg',
				useInfo:{
					groupId: 0,
					userId :'',
					userType :'1',
					userName :'',
					userMobile :'',
				},
				srcollHeight: 0,
				otherList:{}
			}
		},
		onLoad() {
			this.useInfo.userId = uni.getStorageSync('user-info').driverId
			this.useInfo.userName = uni.getStorageSync('user-info').driverName
			this.useInfo.userMobile  = uni.getStorageSync('user-info').mobile
			this.initSocket()
			this.getHistoryMsg();
		},
		onReady() {
		},
		onPageScroll(e){
			if(e.scrollTop<5){
				this.getHistoryMsg();
			}
		},
		 onHide() {
		    console.log('页面隐藏');
		  },
		methods: {
			
			// 获取历史消息
			getHistoryMsg(){
				if(!this.ajax.flag){
					return; //
				}
				
				// 此处用到 ES7 的 async/await 知识，为使代码更加优美。不懂的请自行学习。
				let get = async ()=>{
					this.hideLoadTips();
					this.ajax.flag = false;
					let data =  await this.joinHistoryMsg();
				
					// console.log('----- 模拟数据格式，供参考 -----');
					// console.log(data);	// 查看请求返回的数据结构 
					
					// 获取待滚动元素选择器，解决插入数据后，滚动条定位时使用
					let selector = '';
										
					if(this.ajax.pageNum>1){
						// 非第一页，则取历史消息数据的第一条信息元素
						selector = `#msg-${this.talkList[0].id}`;
					}else{
						// 第一页，则取当前消息数据的最后一条信息元素
						
						selector = `#msg-${data[data.length-1].id}`;
					}
					console.log(12345)
					// 将获取到的消息数据合并到消息数组中
					this.talkList = [...data,...this.talkList];	
					
					// 数据挂载后执行，不懂的请自行阅读 Vue.js 文档对 Vue.nextTick 函数说明。
					this.$nextTick(()=>{
						// 设置当前滚动的位置
						this.setPageScrollTo(selector);
						
						this.hideLoadTips(true);
												
						if(data.length < this.ajax.rows){
							// 当前消息数据条数小于请求要求条数时，则无更多消息，不再允许请求。
							// 可在此处编写无更多消息数据时的逻辑
						}else{
							this.ajax.pageNum ++;
							
							// 延迟 200ms ，以保证设置窗口滚动已完成
							setTimeout(()=>{
								this.ajax.flag = true;
							},200)
						}
						
					})
				}
				get();
			},
			 //已读
			readed(row){
				console.log(row)
				this.socket.send(JSON.stringify({
					"type":"readed",// 消息类型： "readed"（消息已读确认）, "message"（正常聊天消息）
					"msgId":row.msgId,//消息id （readed的时候必带）
					"toUserId": row.senderUserId,//this.driverId, //目的用户Id（message的时候必带）：0（平台）， userId（普通用户）
					"content": row.content//消息内容（message的时候必带）
				}));
			},
			// 拼接历史记录消息，正式项目可替换为请求历史记录接口

			joinHistoryMsg(){
				// 此处用到 ES6 的 Promise 知识，不懂的请自行学习。
				return new Promise((done,fail)=>{
					if(this.ajax.pageNum > this.ajax.pages){
						done([])
						return false
					}
					// 无数据请求接口，由 setTimeout 模拟，正式项目替换为 ajax 即可。
					this.wxRequest({
						url: `${this.API}/cusMsg/page`,
				        method: "post",
				        data: {
				          	pages: this.ajax.pageNum,
							// senderUserId:0,
							// "receiverUserId": this.useInfo.userId, //接收者id
							"senderUserId": this.useInfo.userId, //发送者id
							"receiverUserId": 0, //接收者id
				        },
				        success: (res) => {
							this.ajax.pages = res.data.data.pages
							let list = res.data.data.list
							list.forEach((item,index) => {
								item.id = index
							})
							if(this.ajax.pageNum == 1){
								this.otherList = list.find(item => {
									return item.senderGroupId == 0
								})
								// console.log(this.otherList,'已读的东西')
								let that = this
								setTimeout(function(){
									that.otherList?that.readed(that.otherList):''
								},1000)
							}
							done(list.reverse())
				        },
				      });
					// setTimeout(()=>{
					// 	console.log(this.msgList,1111)
					// 	// let data = join()
						
					// 	done(data);
					// },1500);
				})
				
				
			},
			// 设置页面滚动位置
			setPageScrollTo(selector){
				let view = uni.createSelectorQuery().in(this).select(selector);
				view.boundingClientRect((res) => {
					console.log(res)
					uni.pageScrollTo({
					    scrollTop:res.top - 30,	// -30 为多显示出大半个消息的高度，示意上面还有信息。
					    duration: 0
					});
				}).exec();
			},
			// 隐藏加载提示
			hideLoadTips(flag){
				if(flag){
					this.ajax.loadText = '消息获取成功';
					setTimeout(()=>{
						this.ajax.loading = false;
					},300);
				}else{
					this.ajax.loading = true;
					this.ajax.loadText = '正在获取消息';
				}
			},
			// 发送信息
			send(){
				if(!this.content.trim()) return;
				
				uni.showLoading({
					title:'正在发送'
				})
				let data = {
					"content": this.content, 
					"type": 'message',
					"toUserId":0
				}
				data = JSON.stringify(data)
				this.socket.send(data)
				setTimeout(()=>{
					uni.hideLoading();
					
					// 将当前发送信息 添加到消息列表。
					let data = {
						"sendTime":this.getCurrentDateTime(),
						"content":this.content,
						"type":1,
						"senderUserId": this.useInfo.userId
					}
					this.talkList.push(data);
					
					this.$nextTick(()=>{
						// 清空内容框中的内容
						this.content = '';
						uni.pageScrollTo({
						    scrollTop: 999999,	// 设置一个超大值，以保证滚动条滚动到底部
						    duration: 0
						});
					})
				},1500);
			},
			// 接收消息
			onMessageReceived () {
				this.socket.getMessage(res=>{
					console.log(res,'接收到的信息')
					let data =JSON.parse(res.data)
					console.log(data)
					let messData = data.data
					 if (data.type == 'message') {
						 let talkLi = {
							content: messData.content,
							fromUserId: '0',
							msgId: messData.msgId,
							toUserId: messData.toUserId,
							type: "message",
							sendTime: messData.sendTime
						}
						this.talkList.push(talkLi);
						this.readed(talkLi)
						this.$nextTick(()=>{
							// 清空内容框中的内容
							this.content = '';
							uni.pageScrollTo({
							    scrollTop: 999999,	// 设置一个超大值，以保证滚动条滚动到底部
							    duration: 0
							});
						})
					}
				})
			},
			getCurrentDateTime() {
				const now = new Date();
				const year = now.getFullYear();
				const month = (now.getMonth() + 1).toString().padStart(2, '0');
				const day = now.getDate().toString().padStart(2, '0');
				const hours = now.getHours().toString().padStart(2, '0');
				const minutes = now.getMinutes().toString().padStart(2, '0');
				const seconds = now.getSeconds().toString().padStart(2, '0');
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			initSocket() {
				let userName = encodeURI(this.useInfo.userName)
				console.log(WebSocket_URL,'打印路径',`${WebSocket_URL}`+`?groupId=${this.useInfo.userId}&userId=${this.useInfo.userId}&authorization=${ uni.getStorageSync(this.DATA_KEY.token)}`
					+ `&userType=1&userName=`+ userName +`&userMobile=${this.useInfo.userMobile}`)
					console.log(this.useInfo.userName)
				// let userName = encodeURIComponent(this.useInfo.userName);
				// console.log(userName);

				this.socket = new wsRequest(
					`${WebSocket_URL}`+`?groupId=${this.useInfo.userId}&userId=${this.useInfo.userId}&authorization=${ uni.getStorageSync(this.DATA_KEY.token)}`
					+ `&userType=1&userName=`+ userName +`&userMobile=${this.useInfo.userMobile}`
				);
				this.onMessageReceived()
				
			}
		},
		onUnload() {
			this.socket.off()
		}
	}
</script>

<style lang="scss">
	/* 根元素样式 设置页面背景、字体大小、字体颜色，字符间距、长单词换行 */
	page {
	  background-color: #f3f3f3;
	  font-size: 28rpx;
	  box-sizing: border-box;
	  color: #333;
	  letter-spacing: 0;
	  word-wrap: break-word;
	}
	
	/* 设置常用元素尺寸规则 */
	view,textarea,input,label,form,button,image{box-sizing: border-box;}
	/* 按钮样式处理 */
	button{font-size: 28rpx;}
	/* 取消按钮默认的边框线效果 */
	button:after{border:none;}
	/* 设置图片默认样式，取消默认尺寸 */
	image{display: block;height: auto;width: auto;}
	/* 输入框默认字体大小 */
	textarea,input{font-size: 28rpx;};
	
	/* 列式弹性盒子 */
	.flex_col {
	  display: flex;
	  flex-direction: row;
	  flex-wrap: nowrap;
	  justify-content: flex-start;
	  align-items: center;
	  align-content: center;
	}
	/* 行式弹性盒子 */
	.flex_row {
	  display: flex;
	  flex-direction: column;
	  flex-wrap: nowrap;
	  justify-content: flex-start;
	  align-items: flex-start;
	  align-content: flex-start;
	}
	 
	/* 弹性盒子弹性容器 */
	.flex_col .flex_grow{width:0;flex-grow: 1;}
	.flex_row .flex_grow{flex-grow: 1;}
	 
	/* 弹性盒子允许换行 */
	.flex_col.flex_wrap{flex-wrap: wrap;}
	 
	/* 弹性盒子居中对齐 */
	.flex_col.flex_center,.flex_row.flex_center{justify-content: center;}
	 
	/* 列式弹性盒子两端对齐 */
	.flex_col.flex_space{justify-content: space-between;}
	
	/* 弹性盒子快速分栏 ,这里非常郁闷 uniapp 居然不支持 * 选择器 */
	.flex_col.flex_col_2>view{width: 50%;}
	.flex_col.flex_col_3>view{width: 33.33333%;}
	.flex_col.flex_col_4>view{width: 25%;}
	.flex_col.flex_col_5>view{width: 20%;}
	.flex_col.flex_col_6>view{width: 16.66666%;}
	
	/* 字体颜色 */
	.color_333 {color: #333;}
	.color_666 {color: #666;}
	.color_999 {color: #999;}
	.color_ccc {color: #ccc;}
	.color_fff {color: #fff;}
	.color_6dc{color: #6dca6d;}
	.color_d51{color: #d51917;}
	.color_09f{color: #0099ff;}
	 
	/* 背景色*/
	.bg_fff{background-color: #ffffff;}
	 
	/* 字体大小 */
	.size_10 {font-size: 20rpx;}
	.size_12 {font-size: 24rpx;}
	.size_14 {font-size: 28rpx;}
	.size_16 {font-size: 32rpx;}
	.size_18 {font-size: 36rpx;}
	.size_20 {font-size: 40rpx;}
	 
	/* 字体加粗 */
	.font_b{font-weight: bold;}
	 
	/* 对齐方式 */
	.align_c{text-align: center;}
	.align_l{text-align: left;}
	.align_r{text-align: right;}
	 
	/* 遮罩 */
	.shade{
	  position: fixed;
	  top: 0;
	  right: 0;
	  bottom: 0;
	  left: 0;
	  background-color: rgba(0,0,0,0.8);
	  z-index: 100;
	}
	 
	/* 弹窗 */
	.shade_box{
	  position: fixed;
	  top: 0;
	  right: 0;
	  bottom: 0;
	  left: 0;
	  margin: auto;
	  z-index: 101;
	  min-width: 200rpx;
	  min-height: 200rpx;
	}
	
	page{
		background-color: #F3F3F3;
		font-size: 28rpx;
	}
	
	/* 加载数据提示 */
	.tips{
		position: fixed;
		left: 0;
		top:var(--window-top);
		width: 100%;
		z-index: 9;
		background-color: rgba(0,0,0,0.15);
		height: 72rpx;
		line-height: 72rpx;
		transform:translateY(-80rpx);
		transition: transform 0.3s ease-in-out 0s;
		
		&.show{
			transform:translateY(0);
		}
	}
	
	.box-1{
		width: 100%;
		height: auto;
		padding-bottom: 100rpx;
		box-sizing: content-box;
		
		/* 兼容iPhoneX */
		margin-bottom: 0;  
		margin-bottom: constant(safe-area-inset-bottom);  
		margin-bottom: env(safe-area-inset-bottom);  
	}
	.box-2{
		position: fixed;
		left: 0;
		width: 100%;
		bottom: 0;
		height: auto;
		z-index: 2;
		border-top: #e5e5e5 solid 1px;
		box-sizing: content-box;
		background-color: #F3F3F3;
		
		/* 兼容iPhoneX */
		padding-bottom: 0;  
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom);  
		
		>view{
			padding: 0 20rpx;
			height: 100rpx;
		}
		
		.content{
			background-color: #fff;
			height: 64rpx;
			padding: 0 20rpx;
			border-radius: 32rpx;
			font-size: 28rpx;
		}
		
		.send{
			background-color: #FFFFFF;
			color: #333;
			height: 64rpx;
			margin-left: 20rpx;
			border-radius: 32rpx;
			padding: 0;
			width: 120rpx;
			line-height: 62rpx;
			
			&:active{
				background-color: #FFFFFF;
			}
		}
	}
	
	.talk-list{
		padding-bottom: 20rpx;
		
		/* 消息项，基础类 */
		.item{
			padding: 20rpx 20rpx 0 20rpx;
			align-items:flex-start;
			align-content:flex-start;
			color: #333;
			
			.pic{
				width: 92rpx;
				height: 92rpx;
				border-radius: 50%;
				border: #fff solid 1px;
			}
			
			.content{
				padding: 20rpx;
				border-radius: 4px;
				max-width: 500rpx;
				word-break: break-all;
				line-height: 52rpx;
				position: relative;
			}
			
			/* 收到的消息 */
			&.pull{
				.content{
					margin-left: 32rpx;
					background-color: #fff;
					p{
						color: #777777;
						text-align: left;
						font-size: 22rpx;
						line-height: 20rpx;
					}
					&::after{
						content: '';
						display: block;
						width: 0;
						height: 0;
						border-top: 16rpx solid transparent;
						border-bottom: 16rpx solid transparent;
						border-right: 20rpx solid #fff;
						position: absolute;
						top: 30rpx;
						left: -18rpx;
					}
				}
			}
			
			/* 发出的消息 */
			&.push{
				/* 主轴为水平方向，起点在右端。使不修改DOM结构，也能改变元素排列顺序 */
				flex-direction: row-reverse;
				
				.content{
					margin-right: 32rpx;
					background-color: #FFFFFF;
					p{
						color: #777777;
						text-align: right;
						font-size: 22rpx;
						line-height: 20rpx;
					}
					&::after{
						content: '';
						display: block;
						width: 0;
						height: 0;
						border-top: 16rpx solid transparent;
						border-bottom: 16rpx solid transparent;
						border-left: 20rpx solid #FFFFFF;
						position: absolute;
						top: 30rpx;
						right: -18rpx;
					}
				}
			}
		}
	}
</style>